<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('系统首页')"/>
    <link rel="stylesheet" href="../admin/css/other/console1.css"/>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">设备领用审批</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                            <a th:text="${unOutDevice}"></a>条未审批
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1620527568465" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1155" width="200" height="200">
                                <path d="M46.112 826.832h928.596a44.522 44.522 0 0 0 0-89.043H46.112a44.522 44.522 0 0 0 0 89.043z m931.776 108.125H49.292a44.522 44.522 0 0 0 0 89.043h928.596a44.522 44.522 0 0 0 0-89.043zM52.472 655.106h915.876a50.882 50.882 0 0 0 50.882-50.882V50.882A50.882 50.882 0 0 0 968.348 0H52.472A50.882 50.882 0 0 0 1.59 50.882v553.342a50.882 50.882 0 0 0 50.882 50.882zM246.46 289.39h286.21a44.522 44.522 0 0 1 0 89.044H246.46a44.522 44.522 0 0 1 0-89.044z"
                                      p-id="1156"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">购置设备审批</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
                            <a th:text="${unIntoDevice}"></a>条未审批
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1620527605609" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1291" width="200" height="200">
                                <path d="M928 543.8h-95.8c-17.6 0-32 14.4-32 32v255.9c0 17.6 14.4 32 32 32H928c17.6 0 32-14.4 32-32V575.8c0-17.6-14.4-32-32-32zM871.8 841c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5-4.7 10.5-10.5 10.5-10.5-4.7-10.5-10.5z m77.8-25.7h-139V587.4h139v227.9z"
                                      fill="#4D4D4D" p-id="1292"></path>
                                <path d="M800.7 448.2a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#4D4D4D"
                                      p-id="1293"></path>
                                <path d="M800.7 317.4v2.4c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1c0-0.8 0-1.6-0.1-2.4h0.1V191.3c0-35.2-28.8-64-64-64H128.3c-35.2 0-64 28.8-64 64V640c0 35.2 28.8 64 64 64h302.1v127.7h-155c-17.6 0-32 14.4-32 32s14.4 32 32 32H657c17.5 0 31.9-14.4 32-32 0-17.6-14.4-32-32-32H498V704h206.7v-0.1c17.7-0.2 31.9-14.4 31.9-32.1 0-17.6-14.3-31.9-31.9-32.1H160.8c-17.6 0-32-14.4-32-32V223.8c0-17.6 14.4-32 32-32h607.9c17.6 0 32 14.4 32 32v93.6z"
                                      fill="#4D4D4D" p-id="1294"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">申请实验室审批</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
                            <a th:text="${unLab}"></a>条未审批
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <svg t="1620527636426" class="icon" viewBox="0 0 1312 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1771" width="200" height="200">
                                <path d="M1240.784 427.808c1.456 36.096 14.4 70.128 18.768 105.776 12.72 103.6 15.184 206.224-23.024 306-31.552 82.464-93.92 127.088-177.92 143.392-76.32 14.816-153.184 12.64-230.592 6.672-69.984-5.376-140.352-0.752-210.176 8.272-24.32 3.152-49.024 3.888-73.312 5.328-61.312 3.632-122.832 11.328-184.288 6.128-83.84-7.088-167.76-13.92-241.344-62.832-56.416-37.504-88.768-90.288-99.488-154.912-20.272-122.24 3.568-237.28 65.952-344.272C203.472 244.784 380.592 114.88 596.656 33.424 642.784 16.032 691.296 5.392 740.4 5.28 817.376 5.12 889.136 27.872 955.632 66.448c89.968 52.224 161.008 123.68 214.272 212.96 5.376 9.04 12.032 17.28 18.112 25.904-7.76 9.488 40.864 36.656 52.768 122.496"
                                      fill="#DAEDF5" p-id="1772"></path>
                                <path d="M0 878.368h1307.968v-52.56H0zM888.032 716.16a7.472 7.472 0 1 1-14.928 0v-50.112a7.456 7.456 0 1 1 14.928 0v50.128z"
                                      fill="#004B90" p-id="1773"></path>
                                <path d="M888.032 666.368a7.792 7.792 0 0 1-7.792 7.792h-124.272a7.792 7.792 0 0 1 0-15.584h124.272c4.304 0 7.792 3.504 7.792 7.792"
                                      fill="#004B90" p-id="1774"></path>
                                <path d="M815.648 585.712a11.248 11.248 0 0 1-15.84-0.688l-25.12-27.408a11.248 11.248 0 0 1 0.688-15.84l12.768-11.696c4.528-4.16 11.664-3.84 15.824 0.688l25.12 27.408c4.16 4.544 3.856 11.68-0.688 15.84l-12.752 11.68z"
                                      fill="#00C368" p-id="1775"></path>
                                <path d="M1015.504 410.512a9.312 9.312 0 0 1-13.12-0.576l-35.648-38.88a9.328 9.328 0 0 1 0.576-13.12l53.488-48.88a9.296 9.296 0 0 1 13.12 0.576l35.664 38.896c3.44 3.76 3.2 9.664-0.576 13.12l-53.504 48.864z"
                                      fill="#004B90" p-id="1776"></path>
                                <path d="M887.248 556.016a11.248 11.248 0 0 1-15.84-0.688l-60.912-66.448a11.248 11.248 0 0 1 0.688-15.84l144.544-132.48a11.232 11.232 0 0 1 15.84 0.688l60.912 66.448c4.16 4.544 3.84 11.68-0.688 15.84l-144.544 132.48z"
                                      fill="#FFFFFF" p-id="1777"></path>
                                <path d="M853.072 587.344a11.232 11.232 0 0 1-15.84-0.688l-60.912-66.448a11.264 11.264 0 0 1 0.704-15.856l34.96-31.36 76.048 82.992-34.96 31.36z"
                                      fill="#004B90" p-id="1778"></path>
                                <path d="M1052.24 604.16c0-97.936-121.568-126.752-121.568-126.752-5.616-2.512-10.24 0.464-10.24 6.64v23.92c0 6.176 4.608 13.296 10.24 15.84 0 0 75.216 21.536 75.216 80.912 0 59.36-56.48 107.936-95.584 107.936H746.32c-6.16 0-11.2 5.04-11.2 11.2v26.144c0 6.176 5.04 11.216 11.2 11.216H910.24c66.24 0 142-59.12 142-157.056"
                                      fill="#9DC4D1" p-id="1779"></path>
                                <path d="M987.696 817.264c0 6.16-5.04 11.2-11.2 11.2H688.8a11.248 11.248 0 0 1-11.216-11.2v-3.744c0-6.16 5.04-11.2 11.2-11.2h287.68c6.176 0 11.216 5.04 11.216 11.2v3.744z"
                                      fill="#004B90" p-id="1780"></path>
                                <path d="M987.76 492.368a51.104 51.104 0 1 1-102.192 0 51.104 51.104 0 0 1 102.192 0"
                                      fill="#00C368" p-id="1781"></path>
                                <path d="M972.352 492.368a35.68 35.68 0 1 1-71.392 0 35.68 35.68 0 0 1 71.392 0"
                                      fill="#403833" p-id="1782"></path>
                                <path d="M1002.432 828.48H830.72v-115.856h85.424l88.304 109.472s5.616 6.384-2.016 6.384"
                                      fill="#FFFFFF" p-id="1783"></path>
                                <path d="M955.296 492.368a18.624 18.624 0 1 1-37.28 0 18.624 18.624 0 0 1 37.28 0"
                                      fill="#4791D9" p-id="1784"></path>
                                <path d="M873.104 740.368a11.12 11.12 0 1 1-22.24 0 11.12 11.12 0 0 1 22.24 0M868.512 813.44a11.12 11.12 0 1 1-22.224-0.016 11.12 11.12 0 0 1 22.24 0"
                                      fill="#004B90" p-id="1785"></path>
                                <path d="M347.584 243.52c-14.384-14.384-21.44-22.704-24.368-38.592l-60.608 60.608c15.888 2.928 24.208 10 38.592 24.368l51.84 51.888 46.416-46.432c-14.912-14.928-38.192-38.16-51.872-51.84M500.976 172.432c0-26.352 1.168-40.448 13.04-57.712h-111.104c11.856 17.264 13.024 31.36 13.024 57.712l-0.016 95.072h85.088l-0.032-95.072M633.328 503.84c7.104-7.104 11.216-10.592 19.072-12.064l-29.952-29.952c-1.456 7.84-4.96 11.968-12.064 19.088l-101.232 101.2 22.96 22.96 101.216-101.216"
                                      fill="#FFFFFF" p-id="1786"></path>
                                <path d="M580.784 598.24a122.304 122.304 0 0 1-122.32 122.304 122.304 122.304 0 1 1 0-244.624 122.304 122.304 0 0 1 122.32 122.304"
                                      fill="#FFFFFF" p-id="1787"></path>
                                <path d="M580.784 376.224a122.304 122.304 0 1 1-244.64 0 122.304 122.304 0 0 1 244.64 0"
                                      fill="#FFFFFF" p-id="1788"></path>
                                <path d="M592.624 826.72h-268.32a134.16 134.16 0 0 1 268.32 0" fill="#F1F0EF"
                                      p-id="1789"></path>
                                <path d="M488.048 711.776v-22.752a95.28 95.28 0 0 0 66.192-84.032c-60.16-1.136-128.368-27.984-189.008-21.232a95.28 95.28 0 0 0-1.216 14.464 95.264 95.264 0 0 0 66.464 90.8v22.752a103.968 103.968 0 0 0-75.2 99.872h208a103.968 103.968 0 0 0-75.232-99.872M511.904 563.152a19.52 19.52 0 1 1-39.04 0 19.52 19.52 0 0 1 39.04 0M450.192 526.512a14.656 14.656 0 1 1-29.296 0 14.656 14.656 0 0 1 29.296 0M478.8 465.648a19.52 19.52 0 1 1-39.04 0 19.52 19.52 0 0 1 39.04 0M509.152 425.856a11.296 11.296 0 1 1-22.608 0 11.296 11.296 0 0 1 22.608 0M432.208 404.432a11.312 11.312 0 1 1-22.608 0 11.312 11.312 0 0 1 22.608 0M444.672 297.488a9.12 9.12 0 1 1-18.24 0.016 9.12 9.12 0 0 1 18.24 0M477.536 364.8a9.12 9.12 0 1 1-18.272 0.032 9.12 9.12 0 0 1 18.272-0.016"
                                      fill="#01AF63" p-id="1790"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">申请工位审批</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
                            <a th:text="${unLabWork}"></a>条未审批
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1620527659166" class="icon" viewBox="0 0 1191 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1990" width="200" height="200">
                                <path d="M509.269995 840.345128v-68.498303a21.343674 21.343674 0 0 0-6.452739-14.890936 20.350945 20.350945 0 0 0-14.890935-5.956374H236.26951a20.84731 20.84731 0 0 0-21.343674 20.84731v158.836646a21.343674 21.343674 0 0 0 6.452739 14.890935 20.84731 20.84731 0 0 0 14.890935 5.956374h232.298595l27.796413-72.469219zM236.765875 697.888512h251.160446a20.84731 20.84731 0 0 0 21.343674-20.84731v-159.33301a20.350945 20.350945 0 0 0-21.343674-20.84731H236.26951a20.84731 20.84731 0 0 0-20.847309 20.84731v158.836646a21.343674 21.343674 0 0 0 6.452738 14.890935 20.84731 20.84731 0 0 0 14.890936 6.452739z"
                                      p-id="1991"></path>
                                <path d="M992.729035 322.140572h-229.816771l-42.687349-26.307319v-49.636452H843.81968a39.212797 39.212797 0 0 0 38.716432-40.205526V39.709161A39.212797 39.212797 0 0 0 843.81968 0h-309.235094a39.212797 39.212797 0 0 0-38.716433 40.205526v168.763936a39.212797 39.212797 0 0 0 38.716433 40.205526h125.580223v49.636452l-42.687349 26.307319H287.89142v-6.452739l-5.460009-17.869122a88.849249 88.849249 0 0 1 0-49.636452l9.430925-26.307319a123.0984 123.0984 0 0 0 5.956375-49.636452v-19.854581a28.292778 28.292778 0 0 0-30.7746-23.329132H198.545807a28.292778 28.292778 0 0 0-24.818226 23.329132v25.31459a123.594765 123.594765 0 0 0 5.956374 49.636452l9.430926 24.321862a88.849249 88.849249 0 0 1 0 49.636451l-5.460009 17.869123v1.985458H23.825497a24.818226 24.818226 0 0 0-23.825497 22.832768v68.001939a24.818226 24.818226 0 0 0 23.825497 23.825497H49.636452a24.818226 24.818226 0 0 1 23.825497 24.818226v535.577314a24.818226 24.818226 0 0 0 23.825496 24.818226h23.825497a24.818226 24.818226 0 0 0 22.832768-24.818226V463.60446a24.818226 24.818226 0 0 1 23.825497-24.818226h682.997576l111.185652-94.805623a179.683955 179.683955 0 0 1 30.7746-21.840039zM923.734367 999.181774a24.818226 24.818226 0 0 0 23.825497 24.818226h23.825497a24.818226 24.818226 0 0 0 23.825497-24.818226v-131.536597l-71.972855 61.5492z"
                                      p-id="1992"></path>
                                <path d="M624.426563 496.860882a20.84731 20.84731 0 0 0-21.343674 20.84731v154.865729l205.991275-175.713039zM1174.398449 480.977218l-49.636452-42.190984a67.00921 67.00921 0 0 0-19.358216-10.92002 64.031023 64.031023 0 0 0-21.840039-3.970916 66.512845 66.512845 0 0 0-21.840039 3.970916 59.067378 59.067378 0 0 0-18.861851 10.423655l-312.213282 266.051382 130.543868 113.667474 313.206011-265.555017a45.169171 45.169171 0 0 0 0-70.483761zM644.777508 778.795928l-47.154629 134.01842-7.445467 20.350945 188.122152-43.680077 47.154629-40.205526L694.910325 735.612215l-50.132817 43.183713z"
                                      p-id="1993"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">

            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">最近登陆用户</div>
                <div class="layui-card-body">
                    <ul class="list">
                        <li th:each="user:${userList}" class="list-item">
                            <span class="title" th:text="${user.username}"></span>
                            <span class="footer" th:text="${user.lastLoginTime}"></span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">待审批申请</div>
                <div class="layui-card-body">
                    <ul class="list">
                        <li th:each="lab:${labList}" class="list-item">
                            <span class="title" th:text="${lab.labName}"></span>
                            <span style="padding-left: 50px" th:text="${lab.remark}"></span>
                            <span class="footer" th:text="${lab.createTime}"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    链接
                </div>
                <div class="layui-card-body">
                    <a target="_blank" href="https://mybatis.org/mybatis-3/zh/index.html"
                       class="pear-btn pear-btn-danger  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">MyBatis文档</a>
                    <br/>
                    <a target="_blank" href="https://www.thymeleaf.org/documentation.html"
                       class="pear-btn pear-btn-primary  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">Thymeleaf文档</a>
                    <br/>
                    <a target="_blank" href="https://www.layui.com/doc/"
                       class="pear-btn pear-btn-warming  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">Layui文档</a>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts;

        col4();

        function col4() {
            var column4 = echarts.init(document.getElementById('echarts-records'));
            column4.setOption({
                color: ['#36B368'],
                //设置标题
                title: {
                    text: '近7日设备维修情况'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            //坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线
                    }
                },
                legend: {
                    top: '5%',
                    right: '10%',
                    data: ['次数']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '次数',
                        type: 'bar',
                        data: []
                    }
                ]
            });

            //加载时显示loading动画
            column4.showLoading();
            //放x轴的数组
            var name = [];

            //放y轴的数组
            var value = [];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: "/index/repair",     //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $(data).each(function (i, e) {
                        for (var i = 0; i < e.data.length; i++) {
                            name.push(e.data[i].name);
                            value.push(e.data[i].value);
                        }
                    });
                    column4.hideLoading();    //隐藏加载动画
                    column4.setOption({        //加载数据图表
                        xAxis: {
                            data: name
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '次数',
                            type: 'line',
                            barWidth: '60%',
                            data: value,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    column4.hideLoading();
                }
            })
        };
    })
</script>
</body>
</html>
